<template>
    <el-container>
        <el-header style="height: auto">
            <div>
                <el-button type="primary" @click="createModalVisible = true">发布公告</el-button>
            </div>
        </el-header>
        <el-main>
            <el-card v-for="(o, index) in tableData" @key="o.noticeId" class="box-card">
                <div slot="header" class="clearfix">
                    <el-row>
                        <el-col :span="8">
                            <el-badge v-if="o.isTop===1" value="置顶" class="item">
                                <p class="title">{{o.noticeTitle}}</p>
                            </el-badge>
                            <p v-else class="title">{{o.noticeTitle}}</p>
                        </el-col>

                        <el-button type="primary" size="large" class="delNotice" @click="showDelModal(o.noticeId)">删除公告</el-button>
                    </el-row>
                    <el-col :span="3">
                        <span class="names">{{o.realname}}@{{o.projectName}}</span>
                    </el-col>
                    <el-col :span="4">
                        <span class="names">{{o.createTime}}</span>
                    </el-col>
                </div>
                <el-row>
                </el-row>
                <div class="text item notice_content">
                    {{ o.noticeContent }}
                </div>
            </el-card>
            <el-dialog
                    title="提示"
                    :visible.sync="delModalVisible"
                    width="30%"
            >
                <span>是否确认删除该公告？</span>
                <span slot="footer" class="dialog-footer">
                <el-button @click="delModalVisible = false">取 消</el-button>
                <el-button type="primary" @click="delNotice">确 定</el-button>
            </span>
            </el-dialog>

            <el-dialog
                    title="发布公告"
                    :visible.sync="createModalVisible"
                    width="30%"
            >
                <el-form :model="postNoticeInfo">
                    <el-form-item label="标题">
                        <el-input v-model="postNoticeInfo.title"></el-input>
                    </el-form-item>
                    <el-form-item label="内容">
                        <el-input type="textarea" aria-placeholder="输入公告内容" v-model="postNoticeInfo.content"></el-input>
                    </el-form-item>
                    <el-switch
                            v-model="postNoticeInfo.isTop"
                            active-text="置顶">
                    </el-switch>
                </el-form>
                <span slot="footer" class="dialog-footer">
                <el-button @click="createModalVisible = false">取 消</el-button>
                <el-button type="primary" @click="postNotice">确 定</el-button>
            </span>
            </el-dialog>

        </el-main>


    </el-container>

</template>

<script>
    import { notice, noticeRemove, noticeShow } from '../../../api/project/notice';

    export default {
        data() {
            return {
                createModalVisible: false,
                delModalVisible: false,
                // 要删除的项目
                delInfo: '',
                // 要发布的项目
                postNoticeInfo: {
                    content: "",
                    title: "",
                    isTop: false
                },
                tableData: [{
                    'noticeId': '0',
                    'noticeTitle': '加载中...',
                    'noticeContent': '加载中...',
                    'noticer': '',
                    'noticeProject': '0',
                    'isTop': 0,
                    'createTime': '*',
                    'updateTime': null,
                    'realname': '',
                    'projectName': ''
                }]
            };
        },
        computed: {
        },
        methods: {
            postNotice: function() {
                let info = this.postNoticeInfo;
                notice({
                    isTop: Number(info.isTop),
                    noticeContent: info.content,
                    noticeProject: this.$route.query.projectId,
                    noticeTitle: info.title
                }).then(res => {
                    this.$message.success({
                        title: "发送成功",
                        duration: 1000,
                        onClose: location.reload()
                    })
                })
            },
            showDelModal: function(v) {
                if (v) {
                    console.log(v);
                    this.delInfo = v;
                    this.delModalVisible = !this.delModalVisible;
                }
            },
            // 删除公告请求
            delNotice: function() {
                console.log(this.delInfo);
                let that = this;
                noticeRemove({noticeId: this.delInfo}).then(res => {
                    this.$message.success({
                        title: '删除成功',
                        duration: 1000,
                        onClose: function () {
                            // this.tableData.splice(that.delInfo, 1);
                            that.delModalVisible = false;
                        }
                    })
                })
            },
            // 获取公告
            getNotice: function() {
                noticeShow({projectId: this.$store.state.currentProject || this.$route.query.projectId}).then(res => {
                    let endArr = [];
                    let topArr = [];
                    res.data.forEach((item, index) => {
                        let arr = item.createTime.splice(0, 3);
                        item.createTime = arr.join('-');
                        if (item.isTop === 0) endArr.push(item);
                        else topArr.push(item)
                    });
                    topArr = topArr.concat(endArr);
                    this.tableData = topArr;
                })
            }
        },
        created() {
            this.getNotice();
        }
    };
</script>

<style>
    * {
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    .box-card {
        margin: 10px 0 10px 0;
    }

    .delNotice {
        float: right;
    }

    .top {
        color: red;
        font-weight: bolder;
    }

    .title {
        font-size: 20px;
    }

    .el-card__header {
        padding: 25px 20px;
    }

    .names {
        font-size: 14px;
        color: #909399;
    }

    .notice_content {
        margin-top: 10px;
    }

    .date {
        /*text-align: right;*/
    }

</style>